<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "ChartEnergy",
  props: {
    deviceCountData: {
      type: Object,
    }
  },
  data() {
    return {
      chartObj: null,
      timer: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
    window.addEventListener("resize", this.resizeChart);
  },
  beforeDestroy() {
    if (this.chartObj) {
      this.chartObj.dispose();
    }
    clearInterval(this.timer);
    window.removeEventListener("resize", this.resizeChart);
  },
  methods: {
    getOption() {
      const { xData, series } = this.deviceCountData;
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: { lineStyle: { color: "#57617B" } },
        },
        legend: {
          icon: "rect",
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: series.map(s => s.name),
          right: "center",
          textStyle: {
            fontSize: 12,
            color: "#333",
          },
        },
        grid: {
          top: "12%",
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: { lineStyle: { color: "#e2e8ec" } },
          axisLabel: { color: "#000000" },
          data: xData,
        },
        yAxis: {
          type: "value",
          axisTick: { show: false },
          axisLine: { lineStyle: { color: "#e2e8ec" } },
          axisLabel: { margin: 10, color: "#70808e", fontSize: 14 },
          splitLine: { show: false },
        },
        series: series.map(s => ({
          name: s.name,
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          showSymbol: false,
          lineStyle: { width: 1 },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: s.areaColor[0] },
              { offset: 0.8, color: s.areaColor[1] },
            ]),
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10,
          },
          itemStyle: {
            color: s.color,
            borderColor: s.color,
            borderWidth: 2,
          },
          data: s.data,
        })),
      };
    },
    initChart() {
      if (!this.chartObj) {
        this.chartObj = echarts.init(this.$refs.chart, null, { devicePixelRatio: 2.5 });
      }
      this.chartObj.setOption(this.getOption());
      // 自动刷新示例（如非必须可删除）
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (this.chartObj) {
          this.chartObj.setOption(this.getOption(), true);
        }
      }, 4000);
    },
    resizeChart() {
      if (this.chartObj) {
        this.chartObj.resize();
      }
    }
  },
  watch: {
    deviceCountData: {
      handler() {
        this.initChart();
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.chart {
  width: calc(100% - 10px);
  height: 240px;
}
</style>
